<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1. 导入 vue 插件 -->
    <script src="./js/vue@3.5.13.js"></script>
</head>
<body>
    <!-- 2. 准备容器 -->
    <div id="app">
        <!-- 数据绑定 -->
        <img v-bind:src="img" alt="">
        <!-- 单向数据绑定：数据可以更改页面，页面不能更改数据 -->
        <!-- <input type="text" v-bind:value="msg"> -->
        <input type="text" :value="msg">
        <!-- 双向数据绑定：数据不仅可以更改页面，页面也可以更改数据 -->
        <input type="text" v-model="msg">

    </div>

    <script>
        // 3. 解构 vue 函数
        const { createApp, ref } = Vue
        // 4. 实例化 vue
        createApp({
            setup(){
                // 声明一个图片
                let img = ref("https://image1.huabianyl.com/20251009/58c2414b-8fd5-4be3-9250-b8ac676bf3ab")
                let msg = ref("123")

                return{
                    img,
                    msg
                }

            }
        }).mount("#app")   // 5. 挂载容器

    </script>
</body>
</html>